<template>
  <el-dialog
    title="邀请会议成员"
    :visible.sync="isVisible"
    append-to-body
    width="60%"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="链接邀请" name="1">
        <el-container style="display: flex;justify-content: center;padding-top: 50px;padding-bottom: 50px">
          <input ref="inviteCode" v-model="code" type="text" readonly style="width: 300px;">
          <el-button type="primary" style="margin-left: 2em;" @click="handleCopy">
            复制邀请链接
          </el-button>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="直接添加" name="2">
        <el-container style="display: flex;justify-content: center;padding-top: 50px;padding-bottom: 50px">
          <el-select
            v-model="user"
            multiple
            filterable
            remote
            value-key="id"
            reserve-keyword
            placeholder="请输入用户姓名"
            style="width: 300px;"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button type="primary" style="margin-left: 2em;" @click="handleAdd">
            添加
          </el-button>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="通过会议邀请成员" name="3">
        <el-container style="display: flex;flex-direction: column;align-items: center;padding-top: 20px;padding-bottom: 50px">
          <el-select v-model="mid" placeholder="请选择" style="width: 500px;margin-bottom: 20px;" @change="handleChange">
            <el-option
              v-for="item in meeting"
              :key="item.id"
              :label="item.theme"
              :value="item.id"
            />
          </el-select>
          <el-transfer
            v-model="invited"
            :data="member"
            :props="{
              key: 'id',
              label: 'name'
            }"
            :titles="['会议成员', '已选']"
            style="margin-bottom: 20px;"
          />
          <el-button type="primary" style="width: 150px;" @click="handleInvite">
            发送邀请
          </el-button>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="通过部门邀请成员" name="4">
        <el-container style="display: flex;flex-direction: column;align-items: center;padding-top: 20px;padding-bottom: 50px">
          <el-select v-model="mid" placeholder="请选择" style="width: 500px;margin-bottom: 20px;" @change="handleChange2">
            <el-option
              v-for="item in dept"
              :key="item.id"
              :label="item.theme"
              :value="item.id"
            />
          </el-select>
          <el-transfer
            v-model="invited2"
            :data="member2"
            :props="{
              key: 'id',
              label: 'name'
            }"
            :titles="['部门成员', '已选']"
            style="margin-bottom: 20px;"
          />
          <el-button type="primary" style="width: 150px;" @click="handleInvite2">
            发送邀请
          </el-button>
        </el-container>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { findMyMeeting } from '@/api/meeting'
import { findMeetingMember, inviteMember } from '@/api/meetingMember'
import { findUser, findUserByDept } from '@/api/user'
import { findAllDept } from '@/api/dept'

export default {
  name: 'InviteDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    meetingId: {
      required: true,
      type: Number
    },
    code: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      activeName: '1',
      user: '',
      meeting: [],
      dept: [],
      member: [],
      member2: [],
      mid: undefined,
      invited: [],
      invited2: [],
      loading: false,
      users: []
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getAll()
  },
  methods: {
    async getAll() {
      const res = await findMyMeeting(0, 10)
      this.meeting = res.data.data.content
      const res2 = await findAllDept()
      this.dept = res2.data.data
    },
    async getMember(id) {
      const res = await findMeetingMember(id)
      const data = res.data.data
      this.member = []
      data.forEach(element => {
        this.member.push(element.userDetail)
      })
    },
    async getMember2(dept) {
      const res = await findUserByDept(dept)
      const data = res.data.data
      this.member2 = []
      data.forEach(d => {
        this.member2.push(d)
      })
    },
    handleCopy() {
      const inviteCode = this.$refs.inviteCode
      inviteCode.select()
      if (document.execCommand('copy')) {
        this.$notify({
          title: '成功',
          message: '复制成功',
          type: 'success',
          duration: 2000
        })
      }
    },
    remoteMethod(query) {
      findUser(query).then(res => {
        this.users = res.data.data
      })
    },
    async handleAdd() {
      const res = await inviteMember(this.meetingId, this.user)
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '发送成功',
          type: 'success',
          duration: 2000
        })
      }
    },
    handleChange(val) {
      this.getMember(val)
    },
    handleChange2(val) {
      this.getMember2(val)
    },
    async handleInvite() {
      const res = await inviteMember(this.meetingId, this.invited)
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '发送成功',
          type: 'success',
          duration: 2000
        })
        this.isVisible = false
      }
    },
    async handleInvite2() {
      const res = await inviteMember(this.meetingId, this.invited2)
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '发送成功',
          type: 'success',
          duration: 2000
        })
        this.isVisible = false
      }
    }
  }
}
</script>

<style scoped>
</style>
